<template>
  <view >
    <view class="u-skeleton">
      <view class="bc u-skeleton">
        <u-notice-bar mode="vertical" type="primary" :list="noticeList"></u-notice-bar>

        <!--			<view class="bc-word">核销</view>-->
      </view>
      <view class="code-content u-skeleton-rect">
        <view class="code-number ">券码：{{couponCode}}</view>
        <view class="code-scanCode ">
          <i class="iconfont icon-saoma--" @click="scanCode"></i>
          <text class="word" @click="resetCode">重置券码</text>
        </view>
        <view class="code-frequency">
          <view class="frequency-item ">
            <view class="item-number">{{couponNum}}
              <text class="item-unit">张</text>
            </view>
            <view class="item-word">剩余优惠券</view>
          </view>
          <view class="frequency-item ">
            <view class="item-number">{{VerificationNum}}
              <text class="item-unit">次</text>
            </view>
            <view class="item-word">总核销次数</view>
          </view>
        </view>
      </view>
      <view class="code-btn u-skeleton-rect" >
        <navigator url="/pages/coupon/coupon" class="btn-common"><i class="icon-kaquan iconfont"></i>优惠券列表</navigator>
        <view class="btn-common" @click="scanCode"><i class="iconfont icon-saoma--"></i>扫码核销</view>
      </view>
      <view class="record " >
        <text>核销记录</text>
      </view>
      <u-empty text="暂无记录" mode="favor" margin-top="20"	v-if="VerificationList.length == 0"></u-empty>
      <view class="section3 u-skeleton-rect" v-if="VerificationList.length > 0" v-for="list in VerificationList " :key="list.id">
        <view  class="item-leftIcon bc-green u-skeleton-circle" v-if="list.type == 0">
          <i class="iconfont icon-qiaquan" ></i>
        </view>
        <view class="item-leftIcon bc-blue u-skeleton-circle" v-if="list.type == 1">
          <i class="iconfont icon-zhekou1" ></i>
        </view>
        <view class="item-leftIcon bc-red u-skeleton-rect"  v-if="list.type == 2">
          <i class="iconfont icon-duihuan"></i>
        </view>
        <view class="item-middle u-skeleton-rect">
          <view class="item-nickName">{{list.title}}</view>
          <view class="item-date">{{list.useTime}}</view>
        </view>
        <view class="item-shareIcon ">
          <span v-if="list.type == 1">{{list.discount}}折</span>
          <span v-if="list.type == 0">{{list.amount}}元</span>
        </view>
      </view>
    </view>

    <u-modal v-model="showModal" :show-title="false" :show-cancel-button="false" :show-confirm-button="false"
             :mask-close-able="true">
      <view class="modal">
        <view class="modal-code">
          <text class="modal-title">授权提醒</text>
          <text class="word">请授权订阅余额预警消息订阅</text>
        </view>
        <view class="modal-btn">
          <view style="color: rgba(136, 136, 136, 0.85);" @click="showModal = false">取消</view>
          <view style="color: #6BAEFF;" @click="subscription">授权</view>
        </view>
      </view>
    </u-modal>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
    <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
    <u-toast ref="uToast"/>
    <w-loading :text="loadingStyle.text" :mask-type="loadingStyle.maskType" mask="true" click="true" ref="loading"></w-loading>
  </view>
</template>

<script>
import {checkCode, getCheckCouponList, getCouponAndCheckCounts} from "../../api/coupon";
import {sendVideoTitleLamp} from "../../api/shop";

export default {
  data() {
    return {
      showModal: false,
      //券码
      couponCode: "请扫码",
      //剩余优惠券
      couponNum: 0,
      //今日核销次数
      VerificationNum: 0,
      //核销记录
      VerificationList: [],
      //核销记录总数
      total: 0,
      scrollTop: 0,
      query: {
        pageNum: 1,
        pageSize: 5
      },
      noticeList: [
      ],
      loadingStyle:{
        text:"加载中...",
        maskType:'white'
      },
      loading: true, // 是否显示骨架屏组件
    }
  },
  onLoad() {
    this.getInfo();
    this.getList(1);
    this.getNotice();
    this.showModal = true

  },
  onReady(){
  },
  onReachBottom() {
    if (this.query.pageNum <= this.total) {
      this.query.pageNum += 1;
      this.getList(2)
    }
  },
  methods: {
    //订阅消息
    subscription(){
      const _this = this;
      _this.showModal = false;
      wx.requestSubscribeMessage({
        tmplIds: ['QsHEAFFjrarLXA2nId3aJyBYoWQqZC7ECYU7rMlIyX0'], // 此处可填写多个模板 ID，但低版本微信不兼容只能授权一个
        success (res) {
          // console.log('已授权接收订阅消息')
        },
        fail(err){
          console.log(err);
        },
        complete(){
        }

      })
    },
    //扫码核券
    scanCode() {
      const _this = this;
      wx.scanCode({
        onlyFromCamera: true,
        success(res) {
          _this.couponCode = res.result;
          _this.loadingStyle.text = "核销中";
          _this.loadingStyle.maskType = "block";

          _this.$refs.loading.open();
          checkCode({
            qrCode: _this.couponCode
          }).then(res => {
            _this.$refs.loading.close();
            if (res.code == 200) {
              _this.$refs.uToast.show({
                title: '核销成功',
                type: 'success'
              })
              _this.getList(1);
              _this.getInfo();
            }else {
              _this.$refs.uToast.show({
                title: '失败',
                type: 'error'
              })
            }
          }).catch(err =>{
            _this.$refs.loading.close();

          })
        }
      })
    },
    //获取用户领取通知列表
    getNotice(){
      sendVideoTitleLamp().then(res =>{
        this.noticeList = res.data;

      })
    },
    //获取扫码数据
    getInfo() {
      this.$refs.loading.open();
      getCouponAndCheckCounts().then(res => {
        this.couponNum  = res.data.couponCount;
        this.VerificationNum  = res.data.checkCount;
        this.$refs.loading.close();

      }).catch(err =>{
        this.$refs.loading.close();

      })
    },
    //获取核销数据
    getList(type){
      this.loading = true;

      getCheckCouponList(this.query).then(res =>{

        if (type == 1){
          this.VerificationList = res.rows;
        }
        if (type == 2){
          this.VerificationList.push.apply(this.VerificationList,res.rows);
        }
        this.loading = false

        this.total = res.total
      })
    },
    //重置券码
    resetCode(){
      this.couponCode = "请扫码"
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  }
}
</script>

<style lang="scss">
.bc-green {
  background-color: #00D793;
}

.bc-red {
  background-color: #FF7E87;
}
.bc-blue {
  background-color: #64AAFF;
}
.bc {
  width: 100%;
  height: 600rpx;
  border-bottom-right-radius: 64rpx;
  background-image: linear-gradient( #396CF4 0%, #4090EC 100%);


  .bc-word {
    padding: 50rpx 0 0 50rpx;
    color: #007AFF;
    font-size: 40rpx;

  }
}

.code-content {
  margin: 0 auto;
  margin-top: -500rpx;
  width: 654rpx;
  height: 630rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.18);
  border-radius: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  .code-number {
    margin-top: 30rpx;
    font-size: 38rpx;
    font-weight: 600;
    color: #77869E;
  }

  .code-scanCode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 40rpx 0;

    .icon-saoma-- {
      font-size: 180rpx;
      color: #8f9fb3;
      //box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.08);
    }

    .word {
      margin-top: 35rpx;
      font-size: 26rpx;
      font-weight: 600;
      color: #77869E;
    }
  }

  .code-frequency {
    width: 85%;
    margin: 30rpx auto 0;
    display: flex;
    justify-content: space-between;

    .frequency-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .item-number {
        font-size: 60rpx;
        font-weight: 600;
        color: #1F3F66;

        .item-unit {
          font-size: 28rpx;
          font-weight: 500;
          color: #1F3F66;
          margin-left: 15rpx;
        }
      }

      .item-word {
        font-size: 26rpx;
        font-weight: 500;
        color: #7A8899;
        letter-spacing: 3rpx;
      }
    }
  }

}

.code-btn {
  display: flex;
  width: 85%;
  margin: 50rpx auto;
  justify-content: space-between;

  .btn-common {
    width: 45%;
    height: 96rpx;
    background-color: #DFE7F5;
    border-radius: 10rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 26rpx;
    font-weight: 600;
    color: #0047CC;

    .iconfont {
      font-size: 40rpx;
    }
  }
}

.record {
  width: 262rpx;
  height: 54rpx;
  font-size: 40rpx;
  color: #042C5C;
  margin-left: 48rpx;
  font-weight: 600;
}

.section3 {
  width: 90%;
  margin: 30rpx auto 0;
  height: 112rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .item-leftIcon {
    width: 82rpx;
    height: 80rpx;
    border-radius: 16rpx;
    margin-left: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont {
      font-size: 42rpx;
      text-align: center;
      color: #FFFFFF;

    }
    .icon-qiaquan{
      margin-left: 13rpx;
    }
  }

  .item-middle {
    flex: 1;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-left: 40rpx;

    .item-nickName {
      font-size: 32rpx;

      font-weight: 600;
      color: #042C5C;
    }

    .item-date {
      font-size: 20rpx;
      font-family: Avenir-Roman, Avenir;
      font-weight: normal;
      color: #77869E;
      padding: 10rpx 0;
    }
  }

  .item-shareIcon {
    margin-right: 44rpx;
    display: flex;
    font-size: 32rpx;
    color: #EE5A55;
    font-weight: 600;
  }
}

.modal {
  width: 654rpx;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;

  .modal-code {
    flex: 1;
    display: flex;
    margin-right: 40rpx;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    .modal-title{
      font-size: 36rpx;
      font-weight: 600;
      color: #2E3C4D;
      margin-top: 40rpx;
    }
    .word {
      font-size: 30rpx;
      color: #393939;
    }
  }

  .modal-btn {
    display: flex;
    align-items: center;
    border-top: 2rpx solid #E6E6E6;

    view {
      height: 98rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      font-size: 26rpx;
      font-weight: 600;
    }
  }
}
</style>
